<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE>
<html>
<head>
    <base href="<%=basePath%>">
    <title></title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link rel="stylesheet" type="text/css" href="css/edittable.css"  ></link>
    <link rel="stylesheet" type="text/css" href="css/validate.css"  ></link>
    <script type="text/javascript"  src="js/jquery-1.8.0.js"></script>
    <style>
        .info{
            color: green;
            font-weight: bold;
        }
        .error{
            color: red;
            font-weight: bold;
        }
        #tiao{
            width: 150px;
            margin-left: 10px;
            float: left;
        }
        #qiang,#z,#r{
            margin-left: 2px;
            margin-top: 10px;
            width: 20px;
            height: 5px;
            border: 1px solid black;
            float: left;
        }
        .kbai{
            background-color: white;
        }
        .xiao{
            background-color: red;
        }
        .zhong{
            background-color: yellow;
        }
        .da{
            background-color: green;
        }
    </style>
    <script>
        $(function(){
            $("input[type=text]").focus(function(){
                $(this).addClass("input_focus");
            }).blur(function(){
                $(this).removeClass("input_focus");
            });

            $(".form_btn").hover(function(){
                    $(this).css("color","red").css("background","#6FB2DB");},
                function(){
                    $(this).css("color","#295568").css("background","#BAD9E3");
                });
        });
        $(function() {
            $("#username").keyup(function () {
                var s = $("#username").val();
                var e = /^[0-9a-zA-Z]{4,15}$/;
                if (e.test(s) == false) {
                    $("#regname").html("校验失败，格式错误").removeClass().addClass("error");
                } else {
                    $.ajax({
                        url: "AdminServlet",
                        type: "post",
                        data: {
                            flag: "checkreg", username: s
                        },
                        success: function (data) {
                            if (data == "1")
                                $("#regname").html("账号已存在").removeClass().addClass("error");
                            if (data == "0")
                                $("#regname").html("账号可用").removeClass().addClass("info");
                        }
                    });
                }
            });
        });
        $(function () {
            $("#password1").keyup(function(){
                var s = $("#password1").val();
                var e = /^[0-9a-zA-Z]{6,20}$/;
                if (e.test(s) == false) {
                    $("#regpassword1").html("校验失败，格式错误").removeClass().addClass("error");
                } else {
                    $("#regpassword1").html("通过").removeClass().addClass("info");
                }
                $("#qiang").css("background","white");
                $("#z").css("background","white");
                $("#r").css("background","white");
                var reg1 = /^[0-9]{4,15}$/;
                var reg2 = /^[a-z]{4,15}$/;
                var reg3 = /^[A-Z]{4,15}$/;
                var reg4 = /^[0-9a-z]{4,15}$/;
                var reg5 = /^[0-9A-Z]{4,15}$/;
                var reg6 = /^[a-zA-Z]{4,15}$/;
                var reg7 = /^[0-9a-zA-Z]{4,15}$/;
                if(reg1.test(s) || reg2.test(s) || reg3.test(s)){
                    $("#qiang").css("background","red");
                }else if(reg4.test(s) || reg5.test(s) || reg6.test(s)){
                    $("#qiang").css("background","red");
                    $("#z").css("background","yelow");
                }else if(reg7.test(s) ){
                    $("#qiang").css("background","red");
                    $("#z").css("background","yellow");
                    $("#r").css("background","green");
                }
            });
            $("#password2").keyup(function(){
                var s1 = $("#password1").val();
                var s2 = $("#password2").val();
                if(s1==s2 )
                    $("#regpassword2").html("通过").removeClass().addClass("info");
                else
                    $("#regpassword2").html("密码不一致").removeClass().addClass("error");
            });
        });
        $(function () {
           $("#sub").click(function () {
                var a=$("label#regname").text();
                var b=$("label#regpassword1").text();
                var c=$("label#regpassword2").text();
                var a1="账号可用";
                var b1="通过";
                if(a==a1&&b==b1&&c==b1)
                    return confirm("确认提交吗");
                else return false;
           }) ;
        });


    </script>
</head>
<body>
<div class ="div_title">
    <div class="div_titlename"> <img src="images/san_jiao.gif" ><span>用户添加</span></div>
</div>
<form action="AdminServlet" method="post" >
    <input type="hidden" name="flag" value="add" />
    <table class="edit_table" >
        <tr>
            <td class="td_info">账户:</td>	<td class="td_input">
            <input type="text" name="adminName" id="username" class="txtbox" value="${param.adminName }" />
            <label id="regname"></label> </td>
            <td><label>4-15位；只限数字(0-9)和英文(a-z),不区分大小写</label></td>
        </tr>
        <tr>
            <td class="td_info">密码:</td>	<td>
            <input type="password" name="password" id="password1" class="txtbox" value="${param.password1 }"/>
            <div id="tiao">
                <div id="qiang"></div>
                <div id="z"></div>
                <div id="r"></div>
            </div>
            <label id="regpassword1"></label></td>
            <td><label>正确格式：6-20位数字或字母，不区分大小写</label></td>
        </tr>
        <tr>
            <td class="td_info">重复密码:</td>	<td>
            <input type="password" id="password2"  name="pwd_conconfrim" class="txtbox"  value="${param.password2 }"/>
            <label id="regpassword2"></label></td></td>
            <td><label>重复确认密码</label></td>
        </tr>
        <tr>
            <td class="td_info">备注信息:</td>	<td>
            <textarea rows="7" cols="24" name="note" class="txtarea"  >${param.note }</textarea>
            </td>	<td><label>这是内容</label></td>
        </tr>

        <tr>
            <td class="td_info"> </td>	<td>
            <input class="form_btn" type="submit" id="sub" value="提交" />
            <input type="reset"  class="form_btn" value="重置" />
            <label>${msg}</label>
            </td>	<td class="info"> &nbsp;</td>
        </tr>
    </table>
</form>
</body>
</html>
